/**
 * 解析歌词字符串
 * 得到一个歌词对象的数组
 * 每个歌词对象：
 * {time: 开始时间, words: 歌词内容} 
 */
// 歌词对象数组
const parseLrc = () => lrc.split('\n').reduce((acc, cur) => {
    let parts = cur.split(']')
    let timeStr = parts[0].substring(1).split(':')
    const time = +timeStr[0] * 60 + +timeStr[1]
    return [...acc, { time, words: parts[1] }]
}, [])
const lrcData = parseLrc()

// 获取需要的dom，新建一个对象，是防止变量污染
const doms = {
    audio: document.querySelector('audio'),
    container: document.querySelector('.container'),
    ul: document.querySelector('.container ul'),
}

/**
 * 计算出，在当前播放器播放到第几秒的情况下
 * lrcData数组中，应该高亮显示的歌词下标
 * @returns
 */
// 播放器当前时间
const findIndex = () => {
    const curTime = doms.audio.currentTime;
    return lrcData.findIndex(v => curTime < v.time) - 1
}

// 界面

/**
 * 创建歌词元素 li
 */
function createLrcElements() {
    // 创建一个文档片段存放元素
    const flag = document.createDocumentFragment()
    for (let i = 0; i < lrcData.length; i++) {
        // 创建li元素
        let li = document.createElement('li')
        li.textContent = lrcData[i].words
        flag.appendChild(li)
    }
    // 将文档片段附加到DOM树中
    doms.ul.appendChild(flag)
}
createLrcElements()

// clientHeight会导致重排，所以都要写到最前面用变量保存，避免多次重排
// 容器高度
const containerHeight = doms.container.clientHeight
// 每个li的高度（ul第一个子元素的高，所有的li高度一样）
const liHeight = doms.ul.children[0].clientHeight;// 尽量减少硬编码 hard code
// 最大偏移量
const maxOffset = doms.ul.clientHeight - containerHeight;
const ulHeight = doms.ul.clientHeight

/**
 * 设置ul元素的偏移量
 */
function setOffset(params) {
    const index = findIndex()
    // 获取偏移量
    let offset = liHeight * index + liHeight / 2 - containerHeight / 2
    // 为了不让第一句歌词到中间去了
    if (offset < 0) offset = 0;
    // 为了不让第最后一句歌词到中间去了
    if (offset > maxOffset) offset = maxOffset;
    // 设置偏移量
    doms.ul.style.transform = `translateY(-${offset}px)`;
    // 去掉之前li元素的高亮样式
    let li = doms.ul.querySelector('.active');
    if (li) li.classList.remove('active')
    // 重新获取当前li元素并且高亮显示
    li = doms.ul.children[index]
    if (li) li.classList.add('active')
}

doms.audio.addEventListener('timeupdate', setOffset)